<template>
    <h1>购物车</h1>

    <button @click="addGoodsFlag = true">添加商品</button>

    <showmsg v-if="addGoodsFlag" @cancelBtn="cancelAddBtn" @okBtn="okAddBtn" />

    <!-- 商品列表 -->
    <ul class="list_ul">
        <li v-for="(item, index) in $store.state.list" :key="index">
            商品名: {{ item.name }} --- 商品价格: {{ item.price }} ---
            <button>编辑</button> ---
            <button>删除</button>
        </li>
    </ul>
</template>

<script setup>
import goods from "./goods";
import showmsg from "./components/showmsg.vue";
import { ref, onMounted } from "vue";
import { useStore } from 'vuex'

const store = useStore()

// ==================================添加弹出框相关功能====================================
// 控制添加弹出框 展示/隐藏
const addGoodsFlag = ref(false);

// 添加弹出框的取消按钮
function cancelAddBtn() {
    addGoodsFlag.value = false;
}

// 添加弹出框的确定按钮
async function okAddBtn(fromData) {
    // 借助 goods 将商品进行一个存储
    await goods.createGoods(fromData);
    
    // 每次添加完毕后, 获取最新的数据, 重新渲染页面
    await getGoods()
    
    cancelAddBtn();
}
// ==================================添加弹出框相关功能====================================




// 获取商品
async function getGoods () {
    const list = await goods.getGoods()

    // console.log(list)
    // this.$store.commit('setList', list)
    store.commit('setList', list)
}

// 类似于在 组件创建阶段 执行, 实际开发中不推荐, 推荐写在实际的生命周期中
// getGoods()

// 指定了函数需要在 组件挂载完毕后 执行
onMounted(() => {
    getGoods()
})
</script>

<style>
* {
    padding: 0;
    margin: 0;
}
html,
body,
#app {
    width: 100%;
    height: 100%;
}
</style>
